import styles from "./index.module.less";
import {
  is_closeModal,
  options,
  posterUrlModule,
  uniClass,
} from "@/components/common/VideoView/store";
import { videoRef } from "./store";
import { modalConfig } from "@/components/common/VideoView/modal";
import { useRefModel } from "@/utils/hooks";
export default defineComponent({
  name: "VideoPlayer",
  props: {
    modelValue: {
      type: String,
      default: undefined,
    },
    isDisplayDelete: {
      type: Boolean,
      default: false,
    },
    play_font_size: {
      type: Number,
      default: 14,
    },
    delete_font_size: {
      type: Number,
      default: 14,
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit, slots, expose, attrs }: any) {
    const videoUrl = useRefModel(props, "modelValue", emit);
    const _visible = ref(false);
    watch(
      () => is_closeModal.value,
      (newValueState) => {
        if (newValueState === true) _visible.value = false;
      }
    );
    watch(
      () => _visible.value,
      (newValueState) => {
        if (newValueState === false) is_closeModal.value = false;
      }
    );

    const defineModal = { ...modalConfig(), visible: _visible };
    const handlePlay = async function () {
      if (videoRef?.value?.paused || videoRef.value === null) {
        options.src = videoUrl.value;
        posterUrlModule.value = await getVideoFirstFrame(options.src);
        _visible.value = true;
      }
    };
    return () => {
      return !isEmptyType(videoUrl.value) ? (
        <>
          <div {...attrs} class={[styles.container]}>
            {_visible.value === false ? (
              <>
                <video ref={(el) => (videoRef.value = el)} class={styles.video}>
                  <source src={videoUrl.value} type="video/mp4" />
                </video>
                <div class={styles.mask}>
                  {props.isDisplayDelete ? (
                    <delete-outlined
                      style={`cursor: pointer;font-size: ${props.delete_font_size}px`}
                      onClick={() => (videoUrl.value = "")}
                    />
                  ) : null}
                  <play-circle-outlined
                    style={`cursor: pointer;font-size: ${props.play_font_size}px`}
                    onClick={handlePlay}
                  />
                </div>
              </>
            ) : null}
          </div>
          {_visible.value === true
            ? withDirectiveDragModal({
                vNode: _visible.value ? <s-modal {...defineModal} /> : null,
                bindingValue: uniClass,
              })
            : null}
        </>
      ) : null;
    };
  },
});
